const menus = [
    {
        id: 0,
        name: '首页',
        icon: 'home',
        children: []
    },
    {
        id: 1,
        name: '组织架构',
        icon: 'structure',
        children: [
            {
                id: 10,
                name: '部门管理'
            },
            {
                id: 11,
                name: '角色管理'
            },
            {
                id: 12,
                name: '用户组管理'
            },
            {
                id: 13,
                name: '关联组织'
            }
        ]
    },
    {
        id: 2,
        name: '业务中心',
        icon: 'business',
        children: [
            {
                id: 20,
                name: '商品管理'
            },
            {
                id: 21,
                name: '认证管理'
            },
            {
                id: 22,
                name: '数据审核'
            },
            {
                id: 23,
                name: '充值记录'
            }
        ]
    },
    {
        id: 3,
        name: '安全',
        icon: 'safe',
        children: [
            {
                id: 30,
                name: '用户权限'
            },
            {
                id: 31,
                name: '安全策略'
            },
            {
                id: 32,
                name: '数据保护'
            }
        ]
    }
];

const aside = document.getElementsByTagName('aside')[0];

var frag = document.createDocumentFragment();
for (let i = 0; i < menus.length; i++) {
    const menu = menus[i];
    let div = document.createElement('div');
    div.classList.add('menu');
    div.innerHTML = `<img src="./images/${menu.icon}.png" alt="" class="menu-icon"/>${menu.name}`;
    frag.appendChild(div);

    for (let j = 0; j < menu.children.length; j++) {
        const submenu = menu.children[j];
        let div2 = document.createElement('div');
        div2.classList.add('menu_sub');
        div2.innerText = submenu.name;
        frag.appendChild(div2);
    }
}

aside.appendChild(frag);

const change = document.querySelector('.change');
const dropDown = document.querySelector('ol');
change.onclick = (e) => {
    e.stopPropagation();
    dropDown.style.display = 'unset';
};

document.body.onclick = () => {
    dropDown.style.display = 'none';
};

const liArr = document.querySelectorAll('li');
for (let i = 0; i < liArr.length; i++) {
    const li = liArr[i];
    li.onclick = function (e) {
        e.stopPropagation();
        alert(`查看${e.target.innerText}数据`);
    };
}
